<template>
  <view class="pages">
    <view class="form-wrap w100">
      <u--form labelPosition="left" :model="form" ref="uForm" labelWidth="195" :labelStyle="labelStyle">
        <u-form-item label="收款类型">
          <u-radio-group v-model="form.type" @change="changeType">
            <u-radio v-for="(item, index) in Types" :key="index" :label="item.label" :name="item.id"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="姓名：" prop="name" required>
          <u--input v-model="form.name" border="surround" placeholder="请输入姓名"></u--input>
        </u-form-item>
        <u-form-item label="身份证：" prop="card" required v-if="form.type==1">
          <u--input v-model="form.card" border="surround" placeholder="请输入身份证号码"></u--input>
        </u-form-item>
        <!-- <u-form-item :label="form.type==1?'银行卡：':'支付宝：'" prop="accountnumber" required>
          <u--input v-model="form.accountnumber" border="surround" placeholder="请输入银行卡号"></u--input>
        </u-form-item> -->
        <u-form-item v-if="form.type == 1" label="银行卡：" prop="accountnumber" required>
          <u--input v-model="form.accountnumber" border="surround" placeholder="请输入收款人银行卡号"
            :readonly="isInput"></u--input>
        </u-form-item>
        <u-form-item v-if="form.type == 2" label="收款码图：" prop="accountnumber" required>
          <u-upload :fileList="accountnumberImgList" @afterRead="accountnumberImgAfterRead"
            @delete="accountnumberImgDelete" name="1" width="120" height="120" :maxCount="1"
            :previewFullImage="true"></u-upload>
        </u-form-item>
        <u-form-item label="手机号：" prop="mobile" required>
          <u--input v-model="form.mobile" border="surround" placeholder="请输入手机号"></u--input>
        </u-form-item>
      </u--form>
      <view class="confirm">
        <u-button type="primary" @click="confirm">{{btnText}}</u-button>
        <!-- <u-button type="error" v-if="form.id" @click="del()">删除</u-button> -->
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        labelStyle: {
          fontSize: "28rpx",
          color: "#666",
        },
        Types: [{
          label: '银行卡',
          id: 1

        }, {
          label: '收款码',
          id: 2
        }],
        isImgUpload: true,  //是否上传图片
        accountnumberImgList: [],
        form: {
          type: 1,
          name: '',
          card: '',
          accountnumber: '',
          mobile: '',
        },
        btnText: '提交',
      }
    },
    onLoad(option) {
      if (option.id) {
        this.isImgUpload = false
        this.form = {
          type: option.type == 2 ? 2 : 1,
          id: option.id,
          name: option.name,
          card: option.card,
          accountnumber: option.accountnumber,
          mobile: option.mobile
        }
        if (option.type == 2) {
          this.accountnumberImgList = [{
            url: option.accountnumber
          }]
        }
      }
    },
    methods: {
      changeType(e) {
        this.form.accountnumber = ''
        this.accountnumberImgList = []
        this.isImgUpload = true
      },
      // 选择详情照片
      accountnumberImgAfterRead(event) {
        let lists = [].concat(event.file)
        let fileListLen = this.accountnumberImgList.length
        lists.map((item) => {
          this.accountnumberImgList.push({
            ...item
          })
        })
      },
      // 删除详情照片
      accountnumberImgDelete(event) {
        this.isImgUpload = true
        this.accountnumberImgList.splice(event.index, 1)
      },
      async confirm() {
        if (this.form.type < 1) return this.$f.toast('请选择收款类型')
        if (this.form.name == '') return this.$f.toast('请输入姓名')
        if (this.form.type == 1 && this.form.card == '') return this.$f.toast('请输入身份证号码')

        if (this.form.mobile == '') return this.$f.toast('请输入手机号')
        if (this.form.type == 1) {
          if (this.accountnumber == '') return this.$f.toast('请输入银行卡号')
          this.submit()
        } else if (this.form.type == 2) {
          if(!this.isImgUpload){
            this.submit()
            return
          }
          if (this.accountnumberImgList.length == 0) return this.$f.toast('请上传收款码')
          this.$f.tipLoading('图片上传中')
          let arr = []
          let num = 0
          const length = this.accountnumberImgList.length
          let string = []
          for (let i = 0; i < this.accountnumberImgList.length; i++) {
            const result = await this.uploadFilePromise(this.accountnumberImgList[i].url)
            arr.push(result.fullurl)
            num++
          }
          this.form.accountnumber = arr[0]
          console.log("this.form",this.form)
          if (num == length) {
            uni.hideLoading()
            this.submit()
          }
        }
      },
      submit() {
        this.$http('/user/payment', this.form).then(res => {
          this.$to(-1)
        })
      },
      // 上传图片请求
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://hsxt.ruyihui.net/api/common/upload',
            filePath: url,
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '0fe60a01-8332-409e-8d01-fdf0d4f9b1bd',
            },
            name: 'file',
            timeout: 10000,
            success: (res) => {
              setTimeout(() => {
                resolve(JSON.parse(res.data).data)
              }, 1000)
            },
            fail: res => {
              console.log('error')
              this.$f.errorToast('上传失败')
              reject(res)
            }
          });
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(16rpx + #{$safe});
  }

  .form-wrap {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 34rpx;
    box-sizing: border-box;
    height: calc(100vh - 32rpx - #{$safe});
    position: relative;
  }

  .confirm {
    position: absolute;
    bottom: 34rpx;
    left: 34rpx;
    right: 34rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    ::v-deep .u-button {
      border-radius: 80rpx;

      &:nth-child(2) {
        margin-left: 16rpx;
      }
    }
  }

  ::v-deep .u-input {
    padding: 8px 9px !important;
    background-color: #f4f8ff !important;
  }

  ::v-deep .u-border {
    border-color: #f4f8ff !important;
  }

  ::v-deep input,
  ::v-deep textarea {
    font-size: 28rpx !important;
  }

  .confirm {
    ::v-deep .u-button {
      font-size: 28rpx !important;
    }
  }
</style>
